<template>
  <div>
    <div id="vote-main" ref="echarts"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      intervalId: null,
      chart: null,
      option: {
        timeline: {
          bottom: -15,
          controlStyle: {
            //控制按钮的样式；包括播放/前进/后退按钮
            showPlayBtn: false, //是否显示后退按钮；
            normal: {
              color: "#666",
              borderColor: "#666"
            },
            emphasis: {
              label: false,
              color: "#666",
              borderColor: "#aaa"
            }
          },
          show: true,
          axisType: "category",
          autoPlay: true,
          playInterval: 1000,
          label: {
            normal: {
              show: true,
              interval: "auto"
              // formatter: '{value}月',
            }
          },
          data: []
        },

        tooltip: {},
        options: []
      }
    };
  },
  mounted() {
    this.getPage();
    this.getList();
  },
  created() {
    this.dataRefreh();
  },
  destroyed() {
    this.clear();
  },
  methods: {
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        console.log("刷新" + new Date());
        this.getList(); //加载数据函数
      }, 1000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    getPage() {
      this.chart = this.echarts.init(this.$refs.echarts);
      this.chart.setOption(this.option);
    },
    getList() {
      this.axios({
        method: "get",
        url: this.requestUrl + "vote/getLists",
        params: {
          tid: this.$route.query.tid
        }
      }).then(res => {
        let opts = res.data.obj.opts;
        let nums = res.data.obj.nums;
        let optss = [];
        let numss = [];
        let index = 0;
        let pageNum = [];
        let count = 1;
        while (index < opts.length) {
          optss.push(opts.slice(index, (index += 6)));
          pageNum.push(count++);
        }
        index = 0;
        while (index < nums.length) {
          numss.push(nums.slice(index, (index += 6)));
        }
        for (var i in optss) {
          let chartsdata = {
            title: {
              text: "投票结果",
              textStyle: {
                fontSize: 20,
                color: "white"
              }
            },
            xAxis: {
              data: optss[i],
              splitLine: {
                //去除网格线
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                color: "white",
                fontSize: 15,
                interval:0
              }
            },
            yAxis: {
              splitLine: {
                //去除网格线
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              }
            },
            series: [
              {
                label: {
                  normal: {
                    show: true,
                    formatter: function(v) {
                      var val = v.data;
                      return val + "票";
                    },
                    color: "#fff"
                  }
                },
                barWidth: 30, //柱图宽度
                name: "票数",
                type: "bar",
                data: numss[i],
                itemStyle: {
                  normal: {
                    label: {
                      show: true, //开启显示
                      position: "top", //在上方显示
                      textStyle: {
                        //数值样式
                        color: "white",
                        fontSize: 15
                      }
                    },
                    //柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 10, 10],
                    //这里是重点
                    color: function(params) {
                      //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                      var colorList = [
                        "#EEEE00",
                        "#EE3B3B",
                        "#C0FF3E",
                        "#BA55D3",
                        "#90EE90",
                        "#00EE00",
                        "#FFD700"
                      ];
                      return colorList[params.dataIndex];
                    }
                  }
                }
              }
            ],
            color: ["#66FF99"]
          };
          this.option.options[i] = chartsdata;
        }
        this.option.timeline.data = pageNum;
        this.chart.setOption(this.option);
      });
    }
  }
};
</script>
<style scoped>
#vote-main {
  position: absolute;
  top: 20%;
  left: 20%;
  background: rgba(255, 255, 255, 0.2);
  height: 70%;
  width: 60%;
}
</style>